<script setup>
import { onMounted, reactive, ref } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import { getFormulaList } from "@/services/formula";
import { onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ossImg } from "@/utils/utils";
import CustomTabBar from "@/components/custom-tab-bar.vue";
import TabBarDivider from "@/components/tab-bar-divider";

const swiperConfig = reactive({
  background: ['color1', 'color2', 'color3'],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 500
})
const banners = ref([])
const hotList = ref([])
const emdlz = getApp().emdlz2

let enterTime = "";
let outTime = "";
let stayTime = "";

const classification = ref({ recipes: [] });
const categories = ref([]);
const isActive = ref(0);

onShow(() => {
  // 用户进入时间
  enterTime = new Date();
})

onHide(() => {
  // 用户退出时间
  outTime = new Date();
  //停留时间(毫秒)
  stayTime = (outTime.getTime() - enterTime.getTime()) / 1000;
  emdlz('track','event','Oreo_crumbs_main_page','view','crumbs_main_page', stayTime);
})

onMounted(() => getData())

onShareAppMessage(() => ({
  title: '万物皆可奥利奥',
  imageUrl: ossImg('formula/share_cover.jpg')
}))

onShareTimeline(() => ({
  title: '万物皆可奥利奥',
  imageUrl: ossImg('formula/share_timeline_cover.jpg')
}))

const getData = async () => {
  const { data } = await getFormulaList();
  banners.value = data.kvs || []
  hotList.value = data.banners || []
  categories.value = data.categories || []
  classification.value = data.categories[0] || { recipes: [] }
  console.log(classification.value)
}

const tabChoose = (item, index) => {
  console.log(item)
  emdlz('track','event','Oreo_crumbs_main_page','click',`crumbs_category_${item.id}`);
  isActive.value = index;
  classification.value = item;
}

const goDetail = (item) => {
  emdlz('track','event','Oreo_crumbs_main_page','click',`crumbs_recipe_${item.id}`);
  uni.navigateTo({
    url: `/pages/formula/detail?id=${item.id}`
  })
} 

const linkKvTo = ({ path, id }) => {
  emdlz('track','event','Oreo_crumbs_main_page','click', `crumbs_kv_${id}`);
  const url = path.startsWith('/') ? path : `/${path}`
  uni.navigateTo({ url })
}

const linkTo = ({ path, id }) => {
  emdlz('track','event','Oreo_crumbs_main_page','click',`crumbs_banner_${id}`);
  const url = path.startsWith('/') ? path : `/${path}`
  uni.navigateTo({ url })
}
</script>

<template>
  <view class="formula-page">
    <swiper
      class="swiper"
      circular
      :indicator-dots="swiperConfig.indicatorDots"
      :autoplay="swiperConfig.autoplay"
      :interval="swiperConfig.interval"
      :duration="swiperConfig.duration"
    >
      <swiper-item
        class="swiper-item"
        v-for="(item, index) in banners"
        :key="index"
      >
        <view :style="{ backgroundImage: `url(${item.image})` }" @click.stop="linkKvTo(item)"></view>
      </swiper-item>
    </swiper>
    <view class="block-title mt-24px mb-15px">
      热门配方推荐
    </view>
    <view class="hot-list">
      <view class="scroll-line">
        <image
          v-for="(item, index) in hotList"
          :key="index"
          class="hot-img"
          :src="item.image"
          @click.stop="linkTo(item)"
        />
      </view>
      <view class="scroll-tag"></view>
      <view class="scroll-tips">
        <view class="progress"></view>
        <span class="arrow-label">左右滑动查看更多</span>
      </view>
    </view>
    <view class="block-title mt-24px mb-18px">
      创意灵感推荐
    </view>
    <view class="flex mb-5px">
      <view class="mall-categories">
        <scroll-view scroll-y="true">
          <!-- 选项卡类别列表 -->
          <view
            class="leading-label"
            v-for="(item, index) in categories"
            :class="{ 'selected': isActive === index }"
            :key="item.id"
            :title="item.name || '-'"
            @click.stop="tabChoose(item, index)"
          >
            {{ item.name }}
            <div>（{{ item.recipes.length }}）</div>
          </view>
        </scroll-view>
      </view>
      <view class="formula-list" v-if="classification.recipes">
        <view class="formula-item" v-for="(item, index) in classification.recipes" :key="index" @click="goDetail(item)">
          <view class="formula-item__cover" :style="{ backgroundImage: `url(${item.image})` }"></view>
          <view class="formula-item__title">{{ item.name }}</view>
        </view>
      </view>
    </view>
  </view>
  <tab-bar-divider />
  <custom-tab-bar :current="2" />
</template>

<style lang="less" scoped>
@import "@/static/css/theme.less";

.formula-page {
  width: 100%;
  min-height: 100vh;
  background-color: white;
}

.formula-list {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .formula-item {
    .formula-item__cover {
      width: 123.5px;
      height: 107px;
      background-repeat: no-repeat;
      background-size: 100%;
      background-position: center;
      border-radius: 5px;
      background-color: #f5f5f5;
      overflow: hidden;
    }
    .formula-item__title {
      font-size: 12px;
      color: #5C5C5C;
      padding: 10px 0 10px 0;
      line-height: 1;
      text-align: center;
    }
  }
}

.mall-categories {
  width: 95px;
  background: white;
  overflow-y: auto;
  box-sizing: border-box;
  //border-right: solid 1px #eff0f0;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
}

.leading-label {
  max-width: 95px;
  min-width: 95px;
  background: white;
  color: #05207F;
  font-size: 13px;
  position: relative;
  box-sizing: border-box;
  border: none;
  padding: 22rpx 40rpx;
  line-height: 1.3;
  text-align: center;

  &:hover {
    background-color: transparent;
  }

  &.selected {
    background-color: rgba(24, 148, 237, 0.24);
    &::before {
      content: "";
      position: absolute;
      width: 5px;
      height: 34px;
      background: #1684DB;
      border-radius: 0 6rpx 6rpx 0;
      top: 50%;
      left: 0;
      transform: translate(0, -50%);
    }
  }
}
  .hot-list {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    .scroll-tips {
      font-size: 8px;
      color: #5B5B5B;
      line-height: 1;
      text-align: center;
      .arrow-label {
        &::before {
          content: "<< ";
        }
        &::after {
          content: " >>";
        }
      }
      .progress {
        width: 164px;
        height: 2px;
        background: #C7C7C7;
        border-radius: 1px;
        margin-bottom: 4px;
        margin-top: 2px;
      }
    }
    .scroll-tag {
      position: absolute;
      right: 0;
      top: 0;
      width: 40px;
      height: 163px;
      background: linear-gradient(to right,  transparent 20%, hsla(0, 0%, 100%, 1) 80%);
    }
    .scroll-line {
      width: 375px;
      height: 163px;
      overflow-x: auto;
      box-sizing: border-box;
      padding-left: 20px;
      padding-right: 10px;
      display: flex;
      align-items: center;
      position: relative;
      .hot-img {
        min-width: 104px;
        max-width: 104px;
        height: inherit;
      }
    }
  }
  .block-title {
    height: 23px;
    font-weight: bold;
    font-size: 21px;
    color: #0631A1;
    line-height: 23px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 13px;
    &::before {
      content: "";
      width: 4px;
      height: 21px;
      background: #0631A1;
      border-radius: 2px;
      margin-right: 7px;
    }
  }
  .swiper {
    width: 100%;
    height: 128px;
  }
  .swiper-item {
    & > view {
      width: 100%;
      height: inherit;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
    }
  }
</style>
